<template>
  <div style="display: flex; font-size: 12px; line-height: 60px;">
    <div style="flex: 1; text-align: left">
      <el-breadcrumb separator="/" style="display: inline-block">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">智慧食堂</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
      <el-dropdown style="width: 70px; cursor: pointer">
    <el-icon class="custom-icon"><setting /></el-icon>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          <span style="text-decoration: none" @click="logout">退出账户</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
    <span>{{username}}</span>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const username = ref(localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{});

const logout = () => {
  localStorage.removeItem("user");
  router.push("/login");
  // 这里需要根据你的实际情况引入 ElMessage
  // ElMessage.success("退出成功。")
};
</script>

<style scoped>
.custom-icon {
  color: rgb(0, 0, 0);
  font-size: 25px;
  margin-top: 15px;
  margin-left: 1px;
  transition: all 0.3s;
  
  &:hover {
    transform: scale(1.2);
  }
}
</style>